<template>
  <div class="box">
    <form @submit="formSubmit" report-submit>
        <input class="tr fs30" hidden type="text" name="id" v-model.lazy ="use.id">
        <input class="tr fs30" hidden type="text" name="code" v-model.lazy ="use.code">
        <div class="df jsb aic fs34 item">
          <label for="name"> <span class="mustWrite">*</span> 姓名</label>
          <input class="tr fs30" placeholder="请输入姓名" type="text" name="name" v-model.lazy ="use.name" />
        </div>
        <div class="df jsb aic fs34 item">
          <label for="name"><span class="mustWrite">*</span>头像</label>
          <input class="tr fs30" name="avator" hidden v-model.lazy ="use.avator" />
          <div class="df jcc aic uploadImg" v-if='!use.avator' @click="uploadImg()"><van-icon name="plus" /></div>
          <div class="df jcc aic uploadImg" v-if='use.avator' @click="previewImg(0, [uploadUrl + 'resource/' + use.avator])"><img v-if='use.avator!==null' mode="aspectFit" :src="uploadUrl + 'resource/' + use.avator + '?imageView/2/w/150/h/150'" alt=""><van-icon color="red" @click.stop="delImg" name="close" class="close"></van-icon></div>
        </div>
        <div class="df jsb aic fs34 item">
          <label><span class="mustWrite">*</span>年龄</label>
          <input class="tr fs30" placeholder="请输入年龄" type="number" name="age" v-model.lazy ="use.age" />
        </div>
        <div class="df jsb aic fs34 item">
          <label><span class="mustWrite">*</span>性别</label>
          <div class="tr"><m-select typeCode='sex' v-model.lazy ="use.sex"></m-select></div>
          <input name="sex" hidden type="text" disabled v-model="use.sex"/>
        </div>
        <div class="df jsb aic fs34 item">
          <label><span class="mustWrite">*</span>血型</label>
          <div class="tr"><m-select typeCode='blood' v-model.lazy ="use.blood"></m-select></div>
          <input name="blood" hidden type="text" disabled v-model.lazy ="use.blood"/>
        </div>
        <div class="df jsb aic fs34 item">
          <label>RH血型</label>
          <div class="tr"><m-select typeCode='rh_type' v-model.lazy ="use.rh_blood"></m-select></div>
          <input name="rh_blood" hidden type="text" disabled v-model.lazy ="use.rh_blood"/>
        </div>
        <div class="df jsb aic fs34 item">
          <label><span class="mustWrite">*</span>身份证号</label>
          <input class="tr fs30" placeholder="请输入身份证号" maxlength="18" type="text" name="id_card" v-model.lazy ="use.id_card"/>
        </div>
        <div class="df jsb aic fs34 item" @click="showTimePicker">
          <label><span class="mustWrite">*</span>出生日期</label>
          <picker
            mode="date"
            :value="date"
            @change="bindDateChange"
          >
            <view class="picker">
              <input class="tr" type="text" placeholder="请选择出生日期" disabled name='birthday' v-model.lazy ="use.birthday">
            </view>
          </picker>
        </div>
        <div class="df jsb aic fs34 item">
          <label><span class="mustWrite">*</span>联系方式</label>
          <input class="tr fs30" placeholder="请输入联系方式" maxlength="11" type="number" name="tel" v-model.lazy="use.tel"/>
        </div>
        <div class="df jsb aic fs34 item mb20">
          <label><span class="mustWrite">*</span>身体状况</label>
          <div class="tr"><m-select typeCode='physical_state' v-model="use.health"></m-select></div>
          <input name="health" hidden type="text" disabled v-model="use.health"/>
        </div>
        <div class="df jsb aic fs34 item">
          <label for="name">第一联系人</label>
          <input class="tr fs30" placeholder="请输入姓名" type="text" name="first_contact" v-model.lazy ="use.first_contact"/>
        </div>
        <div class="df jsb aic fs34 item">
          <label>联系方式</label>
          <input class="tr fs30" placeholder="请输入联系方式" maxlength="11" type="number" name="first_tel" v-model.lazy ="use.first_tel"/>
        </div>
        <div class="df jsb aic fs34 item">
          <label for="name">设计师</label>
          <input class="tr fs30" placeholder="请输入姓名" type="text" name="second_contact" v-model.lazy ="use.second_contact"/>
        </div>
        <div class="df jsb aic fs34 item">
          <label>联系方式</label>
          <input class="tr fs30" placeholder="请输入联系方式" maxlength="11" type="number" name="second_tel" v-model.lazy ="use.second_tel"/>
        </div>
        <div class="df jsb aic fs34 item mb20">
          <div class="">备注</div>
          <input class="fs30 tr" placeholder="请填写备注" name="remark" type="textarea" v-model.lazy ="use.remark" style="min-height: 60rpx"/>
        </div>
        <button size="mini" class="add_submit mainBgColor fs30" form-type="submit" data-type="click">提交</button>
      </form>
  </div>
</template>

<script>
import dayjs from 'dayjs'
import _number from 'lodash/number'
import mpvuePicker from 'mpvue-picker'
import customerRecord from '@/components/customerRecord'
import setting from '@/setting'
import uuid from 'uuid/v1'
import mSelect from '@/components/m_select'
import { updataCustomerDetail, addCustomerDetail, getCustomerDetail } from '@/api'
export default {
  components: {
    mpvuePicker,
    customerRecord,
    mSelect
  },
  data () {
    return {
      uploadUrl: '',
      use: {},
      inputValue: {
        sex: '',
        avator: '',
        blood: '',
        health: '',
        rh_blood: '',
        birthday: ''
      },
      pickerSingleArray: [],
      pickerValueDefault: [],
      pickerValueArray: [],
      deepLength: 2,
      themeColor: '',
      show_sheet: false,
      isshowTimePicker: false,
      type: ''
    }
  },
  methods: {
    bindDateChange (e) {
      this.use.birthday = e.mp.detail.value
    },
    async formSubmit (v) {
      let result = {}
      let text = ''
      if (!v.mp.detail.value.name || !v.mp.detail.value.avator || !v.mp.detail.value.age || !v.mp.detail.value.sex || !v.mp.detail.value.blood || !v.mp.detail.value.id_card || !v.mp.detail.value.birthday || !v.mp.detail.value.tel || !v.mp.detail.value.health) {
        wx.showToast({
          title: '请将必填项填写完整',
          icon: 'none',
          duration: 2000
        })
      } else if (!(/^\d{17}([0-9]|X)$/.test(v.mp.detail.value.id_card))) {
        wx.showToast({
          title: '身份证号码不正确',
          icon: 'none',
          duration: 2000
        })
      } else if (!(/^1(3|4|5|7|8)\d{9}$/.test(v.mp.detail.value.tel))) {
        wx.showToast({
          title: '手机格式不正确',
          icon: 'none',
          duration: 2000
        })
      } else {
        if (this.query === 'add') {
          result.code = 'KH' + dayjs().format('YYYYMMDDHHmmss') + _number.random(1000, 9999)
          result = await addCustomerDetail(v.mp.detail.value)
          text = '新增'
        } else {
          result = await updataCustomerDetail(v.mp.detail.value)
          text = '修改'
        }
        if (result.errno === 0) {
          wx.showToast({
            title: text + '成功',
            duration: 2000
          })
          setTimeout(function () {
            wx.navigateBack()
          }, 2000)
        } else {
          wx.showToast({
            title: text + '失败，请重试',
            icon: 'none',
            duration: 2000
          })
        }
      }
    },
    uploadImg () {
      wx.chooseImage({
        count: 1,
        sizeType: ['original', 'compressed'],
        sourceType: ['album', 'camera'],
        success: (res) => {
          const tempFilePaths = res.tempFilePaths
          wx.uploadFile({
            url: setting.baseUrl + 'img/upload',
            filePath: tempFilePaths[0],
            name: 'file',
            formData: {
              user: 'test'
            },
            success: (res) => {
              if (res.statusCode === 200) {
                const data = JSON.parse(res.data)
                this.use.avator = data.data
              } else {
                console.log('图片太大')
              }
            },
            fail: (res) => {
              console.log('图片太大')
            }
          })
        }
      })
    },
    delImg () {
      this.use.avator = ''
    },
    previewImg (index, urls) {
      wx.previewImage({
        current: 0, // 当前显示图片的http链接
        urls: urls // 需要预览的图片http链接列表
      })
    }
  },
  async mounted () {
    this.uploadUrl = setting.uploadUrl
    this.query = this.$mp.query.text
    if (this.$mp.query.text === 'edit') {
      const data = await getCustomerDetail(this.$mp.query.id)
      this.use = data.data
    } else {
      this.use = {
        code: 'KH' + dayjs().format('YYYYMMDDHHmmss') + _number.random(1000, 9999),
        id: uuid(),
        sex: '',
        blood: '',
        health: '',
        rh_blood: '',
        birthday: '',
        avator: ''
      }
    }
  }
}
</script>

<style scoped>
  .add_submit{position: fixed !important;width: 100%;left: 0;bottom: 0 !important;border-radius:0;z-index: 5;color: #fff;padding: 20rpx 0}
  .box{height: 90vh;background: #eee;overflow: scroll;padding-top: 2vh;padding-bottom: 8vh}
  .item{border-bottom: 1px solid #eee;background: #fff;padding: 20rpx 30rpx;}
  .mb20{margin-bottom: 20rpx}
  .uploadImg{border: 2rpx solid #eee;width: 200rpx;height: 200rpx;position: relative;color: #eee}
  .uploadImg img{width: 100%;height: 100%;}
  .close{position: absolute !important;right: -25rpx !important; top: -25rpx !important;font-size: 50rpx;}
  .colorgray{color: #242424;}
  .pics{padding: 20rpx;}
  .mustWrite{color: red}
</style>
